<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Calendar 日历 | 前端文档</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="shortcut icon" href="/icons/favicon.ico">
    <meta name="description" content="前端文档">
    <meta name="theme-color" content="#3eaf7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    
    <link rel="preload" href="/assets/css/0.styles.d3d84be6.css" as="style"><link rel="preload" href="/assets/js/app.7f089e4c.js" as="script"><link rel="preload" href="/assets/js/2.9f5e73e8.js" as="script"><link rel="preload" href="/assets/js/3.2a47c23c.js" as="script"><link rel="preload" href="/assets/js/15.fc48fa10.js" as="script"><link rel="prefetch" href="/assets/js/10.b5c5700e.js"><link rel="prefetch" href="/assets/js/11.80390338.js"><link rel="prefetch" href="/assets/js/12.f067bd5f.js"><link rel="prefetch" href="/assets/js/13.20c94e2c.js"><link rel="prefetch" href="/assets/js/14.3a03f335.js"><link rel="prefetch" href="/assets/js/16.06981385.js"><link rel="prefetch" href="/assets/js/17.9b40465f.js"><link rel="prefetch" href="/assets/js/18.d89ca224.js"><link rel="prefetch" href="/assets/js/19.c6848e16.js"><link rel="prefetch" href="/assets/js/20.a0711b97.js"><link rel="prefetch" href="/assets/js/21.d566ad85.js"><link rel="prefetch" href="/assets/js/22.4901943a.js"><link rel="prefetch" href="/assets/js/23.d6255fa3.js"><link rel="prefetch" href="/assets/js/24.a88ce84e.js"><link rel="prefetch" href="/assets/js/25.19886fd0.js"><link rel="prefetch" href="/assets/js/26.5c944025.js"><link rel="prefetch" href="/assets/js/27.a61fd313.js"><link rel="prefetch" href="/assets/js/28.1e40ebfd.js"><link rel="prefetch" href="/assets/js/29.60c8dbe1.js"><link rel="prefetch" href="/assets/js/30.64963157.js"><link rel="prefetch" href="/assets/js/31.931ea69e.js"><link rel="prefetch" href="/assets/js/32.bce771e5.js"><link rel="prefetch" href="/assets/js/33.e9c7453f.js"><link rel="prefetch" href="/assets/js/34.99c27ee8.js"><link rel="prefetch" href="/assets/js/35.4066b2d3.js"><link rel="prefetch" href="/assets/js/36.fc941c57.js"><link rel="prefetch" href="/assets/js/37.14163d29.js"><link rel="prefetch" href="/assets/js/38.43335765.js"><link rel="prefetch" href="/assets/js/39.156dbace.js"><link rel="prefetch" href="/assets/js/4.6d8feda3.js"><link rel="prefetch" href="/assets/js/40.163bfe43.js"><link rel="prefetch" href="/assets/js/41.df97e701.js"><link rel="prefetch" href="/assets/js/42.9bafe70e.js"><link rel="prefetch" href="/assets/js/43.b86d1037.js"><link rel="prefetch" href="/assets/js/44.fc145987.js"><link rel="prefetch" href="/assets/js/45.594b749a.js"><link rel="prefetch" href="/assets/js/46.b6c8de53.js"><link rel="prefetch" href="/assets/js/47.bb78b392.js"><link rel="prefetch" href="/assets/js/48.3627a180.js"><link rel="prefetch" href="/assets/js/49.bbd39edf.js"><link rel="prefetch" href="/assets/js/5.77776c33.js"><link rel="prefetch" href="/assets/js/50.b68a715f.js"><link rel="prefetch" href="/assets/js/51.bc4475a2.js"><link rel="prefetch" href="/assets/js/6.480ee688.js"><link rel="prefetch" href="/assets/js/7.92c95b3e.js"><link rel="prefetch" href="/assets/js/8.4389b91c.js"><link rel="prefetch" href="/assets/js/9.4470fdec.js">
    <link rel="stylesheet" href="/assets/css/0.styles.d3d84be6.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">前端文档</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="standard Menu" class="dropdown-title"><span class="title">规范</span> <span class="arrow down"></span></button> <button type="button" aria-label="standard Menu" class="mobile-dropdown-title"><span class="title">规范</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/standard/HTML/" class="nav-link">
  HTML编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/CSS/" class="nav-link">
  CSS编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/JavaScript/" class="nav-link">
  JavaScript编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/VUE/" class="nav-link">
  VUE编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/Markdown/" class="nav-link">
  Markdown语法说明
</a></li><li class="dropdown-item"><!----> <a href="/standard/Commit/" class="nav-link">
  Git提交规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/JSON/" class="nav-link">
  JSON数据规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/CopyWriter/" class="nav-link">
  文案风格指南
</a></li></ul></div></div><div class="nav-item"><a href="/desgin/" class="nav-link">
  可视化平台
</a></div><div class="nav-item"><a href="/materiel/" class="nav-link">
  物料
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="plugin Menu" class="dropdown-title"><span class="title">插件</span> <span class="arrow down"></span></button> <button type="button" aria-label="plugin Menu" class="mobile-dropdown-title"><span class="title">插件</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plugin/HRM-Player/" class="nav-link">
  HRM 播放器
</a></li><li class="dropdown-item"><!----> <a href="/plugin/Vue-Flv-Player/" class="nav-link">
  FLV 播放器
</a></li><li class="dropdown-item"><!----> <a href="/plugin/Calendar/" class="nav-link">
  Calendar 农历面板
</a></li><li class="dropdown-item"><!----> <a href="/plugin/Very-Axios/" class="nav-link">
  Very-Axios
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="utils Menu" class="dropdown-title"><span class="title">函数库</span> <span class="arrow down"></span></button> <button type="button" aria-label="utils Menu" class="mobile-dropdown-title"><span class="title">函数库</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/utils/Type/" class="nav-link">
  类型判断类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Validator/" class="nav-link">
  常规验证类
</a></li><li class="dropdown-item"><!----> <a href="/utils/String/" class="nav-link">
  字符串类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Array/" class="nav-link">
  数组类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Number/" class="nav-link">
  数字类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Money/" class="nav-link">
  金额类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Date/" class="nav-link">
  日期类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Calculate/" class="nav-link">
  浮点计算类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Tools/" class="nav-link">
  工具类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Storage/" class="nav-link">
  存储类
</a></li><li class="dropdown-item"><!----> <a href="/utils/DOM/" class="nav-link">
  DOM类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Event/" class="nav-link">
  事件处理类
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="tools Menu" class="dropdown-title"><span class="title">工具</span> <span class="arrow down"></span></button> <button type="button" aria-label="tools Menu" class="mobile-dropdown-title"><span class="title">工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/tools/NodeJS/" class="nav-link">
  NodeJS
</a></li><li class="dropdown-item"><!----> <a href="/tools/Sourcetree/" class="nav-link">
  Sourcetree
</a></li><li class="dropdown-item"><!----> <a href="/tools/VisualStudioCode/" class="nav-link">
  VSCode
</a></li><li class="dropdown-item"><!----> <a href="/tools/XShell/" class="nav-link">
  XShell
</a></li><li class="dropdown-item"><!----> <a href="/tools/Typora/" class="nav-link">
  Typora
</a></li><li class="dropdown-item"><!----> <a href="/tools/PicGo/" class="nav-link">
  PicGo
</a></li><li class="dropdown-item"><!----> <a href="/tools/XMind/" class="nav-link">
  XMind
</a></li></ul></div></div> <!----></nav> <label title="切换暗色" class="model"><input type="checkbox" hidden="hidden" name="model" id>⚫</label></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="standard Menu" class="dropdown-title"><span class="title">规范</span> <span class="arrow down"></span></button> <button type="button" aria-label="standard Menu" class="mobile-dropdown-title"><span class="title">规范</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/standard/HTML/" class="nav-link">
  HTML编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/CSS/" class="nav-link">
  CSS编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/JavaScript/" class="nav-link">
  JavaScript编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/VUE/" class="nav-link">
  VUE编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/Markdown/" class="nav-link">
  Markdown语法说明
</a></li><li class="dropdown-item"><!----> <a href="/standard/Commit/" class="nav-link">
  Git提交规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/JSON/" class="nav-link">
  JSON数据规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/CopyWriter/" class="nav-link">
  文案风格指南
</a></li></ul></div></div><div class="nav-item"><a href="/desgin/" class="nav-link">
  可视化平台
</a></div><div class="nav-item"><a href="/materiel/" class="nav-link">
  物料
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="plugin Menu" class="dropdown-title"><span class="title">插件</span> <span class="arrow down"></span></button> <button type="button" aria-label="plugin Menu" class="mobile-dropdown-title"><span class="title">插件</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plugin/HRM-Player/" class="nav-link">
  HRM 播放器
</a></li><li class="dropdown-item"><!----> <a href="/plugin/Vue-Flv-Player/" class="nav-link">
  FLV 播放器
</a></li><li class="dropdown-item"><!----> <a href="/plugin/Calendar/" class="nav-link">
  Calendar 农历面板
</a></li><li class="dropdown-item"><!----> <a href="/plugin/Very-Axios/" class="nav-link">
  Very-Axios
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="utils Menu" class="dropdown-title"><span class="title">函数库</span> <span class="arrow down"></span></button> <button type="button" aria-label="utils Menu" class="mobile-dropdown-title"><span class="title">函数库</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/utils/Type/" class="nav-link">
  类型判断类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Validator/" class="nav-link">
  常规验证类
</a></li><li class="dropdown-item"><!----> <a href="/utils/String/" class="nav-link">
  字符串类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Array/" class="nav-link">
  数组类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Number/" class="nav-link">
  数字类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Money/" class="nav-link">
  金额类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Date/" class="nav-link">
  日期类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Calculate/" class="nav-link">
  浮点计算类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Tools/" class="nav-link">
  工具类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Storage/" class="nav-link">
  存储类
</a></li><li class="dropdown-item"><!----> <a href="/utils/DOM/" class="nav-link">
  DOM类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Event/" class="nav-link">
  事件处理类
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="tools Menu" class="dropdown-title"><span class="title">工具</span> <span class="arrow down"></span></button> <button type="button" aria-label="tools Menu" class="mobile-dropdown-title"><span class="title">工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/tools/NodeJS/" class="nav-link">
  NodeJS
</a></li><li class="dropdown-item"><!----> <a href="/tools/Sourcetree/" class="nav-link">
  Sourcetree
</a></li><li class="dropdown-item"><!----> <a href="/tools/VisualStudioCode/" class="nav-link">
  VSCode
</a></li><li class="dropdown-item"><!----> <a href="/tools/XShell/" class="nav-link">
  XShell
</a></li><li class="dropdown-item"><!----> <a href="/tools/Typora/" class="nav-link">
  Typora
</a></li><li class="dropdown-item"><!----> <a href="/tools/PicGo/" class="nav-link">
  PicGo
</a></li><li class="dropdown-item"><!----> <a href="/tools/XMind/" class="nav-link">
  XMind
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>插件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/plugin/" aria-current="page" class="sidebar-link">概述</a></li><li><a href="/plugin/HRM-Player.html" class="sidebar-link">HRM-Player 播放器</a></li><li><a href="/plugin/Vue-Flv-Player.html" class="sidebar-link">Vue-Flv-Player 播放器</a></li><li><a href="/plugin/Calendar.html" aria-current="page" class="active sidebar-link">Calendar 日历</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/plugin/Calendar.html#安装" class="sidebar-link">安装</a></li><li class="sidebar-sub-header"><a href="/plugin/Calendar.html#使用" class="sidebar-link">使用</a></li><li class="sidebar-sub-header"><a href="/plugin/Calendar.html#基本单选" class="sidebar-link">基本单选</a></li><li class="sidebar-sub-header"><a href="/plugin/Calendar.html#基本多选" class="sidebar-link">基本多选</a></li><li class="sidebar-sub-header"><a href="/plugin/Calendar.html#设置周起始日" class="sidebar-link">设置周起始日</a></li><li class="sidebar-sub-header"><a href="/plugin/Calendar.html#高亮日期" class="sidebar-link">高亮日期</a></li><li class="sidebar-sub-header"><a href="/plugin/Calendar.html#某些日期不可选" class="sidebar-link">某些日期不可选</a></li><li class="sidebar-sub-header"><a href="/plugin/Calendar.html#设置日期区间" class="sidebar-link">设置日期区间</a></li><li class="sidebar-sub-header"><a href="/plugin/Calendar.html#自定义render" class="sidebar-link">自定义Render</a></li><li class="sidebar-sub-header"><a href="/plugin/Calendar.html#attributes" class="sidebar-link">Attributes</a></li><li class="sidebar-sub-header"><a href="/plugin/Calendar.html#events" class="sidebar-link">Events</a></li><li class="sidebar-sub-header"><a href="/plugin/Calendar.html#date" class="sidebar-link">Date</a></li></ul></li><li><a href="/plugin/Very-Axios.html" class="sidebar-link">Very-Axios</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="calendar-日历"><a href="#calendar-日历" class="header-anchor">#</a> Calendar 日历</h1> <p><img src="https://img.shields.io/npm/v/vue-lunar-calendar-pro.svg" alt="NPM version"> <img src="https://img.shields.io/github/stars/wangdaodao/vue-lunar-calendar-pro.svg" alt="GitHub stars"> <img src="https://img.shields.io/github/issues/wangdaodao/vue-lunar-calendar-pro.svg" alt="GitHub issues"> <img src="https://img.shields.io/github/forks/wangdaodao/vue-lunar-calendar-pro.svg" alt="GitHub forks"></p> <ul><li>😊 基于 vue 2.0 开发的轻量，高性能日历组件；</li> <li>😘 支持农历，节气，假日显示；</li> <li>😍 原生 js 开发，无第三方库；</li> <li>😂 支持现代浏览器 (IE&gt;= 9)；</li> <li>👍 感谢 <a href="https://github.com/jjonline/calendar.js" target="_blank" rel="noopener noreferrer">calendar.js<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="安装"><a href="#安装" class="header-anchor">#</a> 安装</h2> <h3 id="npm"><a href="#npm" class="header-anchor">#</a> npm</h3> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">npm</span> i vue-lunar-calendar-pro --save
</code></pre></div><h3 id="cdn"><a href="#cdn" class="header-anchor">#</a> cdn</h3> <p>目前可以通过 <a href="https://unpkg.com/vue-lunar-calendar-pro" target="_blank" rel="noopener noreferrer">unpkg.com/vue-lunar-calendar-pro<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 或者 <a href="https://www.jsdelivr.com/package/npm/vue-lunar-calendar-pro" target="_blank" rel="noopener noreferrer">www.jsdelivr.com/package/npm/vue-lunar-calendar-pro<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。</p> <p>🚩 建议使用 CDN 引入组件的用户在链接地址上锁定版本，以免将来组件升级时受到非兼容性更新的影响。🚩</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- 这里会始终引用最新版本 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://unpkg.com/vue-lunar-calendar-pro/dist/calendar.css<span class="token punctuation">&quot;</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>https://unpkg.com/vue-lunar-calendar-pro/dist/calendar.umd.js<span class="token punctuation">'</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://cdn.jsdelivr.net/npm/vue-lunar-calendar-pro/dist/calendar.css<span class="token punctuation">&quot;</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>https://cdn.jsdelivr.net/npm/vue-lunar-calendar-pro/dist/calendar.umd.js<span class="token punctuation">'</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- 这里会引用 1.0.15 版本 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://unpkg.com/vue-lunar-calendar-pro@1.0.15/dist/calendar.css<span class="token punctuation">&quot;</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>https://unpkg.com/vue-lunar-calendar-pro@1.0.15/dist/calendar.umd.js<span class="token punctuation">'</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="使用"><a href="#使用" class="header-anchor">#</a> 使用</h2> <h3 id="全局使用"><a href="#全局使用" class="header-anchor">#</a> 全局使用</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// main.js</span>
<span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span>
<span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">'./App.vue'</span>
<span class="token comment">// ...</span>
<span class="token keyword">import</span> <span class="token string">'vue-lunar-calendar-pro/dist/calendar.css'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Calandar <span class="token keyword">from</span> <span class="token string">'vue-lunar-calendar-pro'</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Calandar<span class="token punctuation">)</span>

<span class="token comment">// ...</span>

<span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  el<span class="token operator">:</span> <span class="token string">'#app'</span><span class="token punctuation">,</span>
  <span class="token function-variable function">render</span><span class="token operator">:</span> <span class="token parameter">h</span> <span class="token operator">=&gt;</span> <span class="token function">h</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--app.vue--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>calendar</span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>800px<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>800px<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">'App'</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="本地注册"><a href="#本地注册" class="header-anchor">#</a> 本地注册</h3> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--app.vue--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>calendar</span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>800px<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>800px<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">import</span> <span class="token string">'vue-lunar-calendar-pro/dist/calendar.css'</span><span class="token punctuation">;</span>
  <span class="token keyword">import</span> Calendar <span class="token keyword">from</span> <span class="token string">'vue-lunar-calendar-pro'</span>
  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">'App'</span><span class="token punctuation">,</span>
    components<span class="token operator">:</span><span class="token punctuation">{</span>Calendar<span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="基本单选"><a href="#基本单选" class="header-anchor">#</a> 基本单选</h2> <p>🔸 设置  <code>default-date</code>  来指定当前显示的月份。如果  <code>default-date</code>  未指定，则显示当月。</p> <p>基本单选: <a href="http://demo.const.team/calendar/demo1.html" target="_blank" rel="noopener noreferrer">demo1<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>calendar</span> <span class="token attr-name">:select-date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>date<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:default-date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>defaultDate<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>calendar</span><span class="token punctuation">&gt;</span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>demonstration<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>默认日期：{{defaultDate}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>demonstration<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>选中日期：{{date}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span>
        defaultDate<span class="token operator">:</span><span class="token string">&quot;2018-06-26&quot;</span><span class="token punctuation">,</span>
        date<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;2019-09-07&quot;</span><span class="token punctuation">]</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="基本多选"><a href="#基本多选" class="header-anchor">#</a> 基本多选</h2> <p>🔸 设置  <code>multiple</code>  开启日期多选。</p> <p>基本多选: <a href="http://demo.const.team/calendar/demo2.html" target="_blank" rel="noopener noreferrer">demo2<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>calendar</span> <span class="token attr-name">multiple</span> <span class="token attr-name">:select-date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>date<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>calendar</span><span class="token punctuation">&gt;</span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>demonstration<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>选中日期：{{date}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span>
        date<span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">&quot;2019-09-07&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;2019-10-10&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;2019-10-16&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;2019-10-15&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;2019-10-22&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;2019-10-18&quot;</span> <span class="token punctuation">]</span> 
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="设置周起始日"><a href="#设置周起始日" class="header-anchor">#</a> 设置周起始日</h2> <p>🔸 设置  <code>first-day-of-week</code>  来指定周起始日。如果  <code>first-day-of-week</code>  未指定则按照周日为起始日。</p> <p>设置周起始日: <a href="http://demo.const.team/calendar/demo3.html" target="_blank" rel="noopener noreferrer">demo3<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>calendar</span> <span class="token attr-name">:first-day-of-week</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>calendar<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:select-date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>date<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>calendar</span><span class="token punctuation">&gt;</span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>demonstration<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>选中日期：{{date}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span>
        date<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;2019-09-07&quot;</span><span class="token punctuation">]</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="高亮日期"><a href="#高亮日期" class="header-anchor">#</a> 高亮日期</h2> <p>🔸 设置  <code>highlighter-date</code>  高亮日期。</p> <p>高亮日期: <a href="http://demo.const.team/calendar/demo4.html" target="_blank" rel="noopener noreferrer">demo4<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>calendar</span> <span class="token attr-name">multiple</span> <span class="token attr-name">:select-date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>date<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:highlighter-date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>highlighter<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>calendar</span><span class="token punctuation">&gt;</span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>demonstration<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>选中日期：{{date}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>demonstration<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>高亮日期：{{highlighter}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span>
        date<span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">&quot;2019-09-07&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;2019-10-10&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;2019-10-16&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;2019-10-15&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;2019-10-22&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;2019-10-18&quot;</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span>
        highlighter<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;2019-12-24&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;2020-01-25&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;2020-02-13&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;2020-02-24&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;2020-02-26&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;2020-06-26&quot;</span><span class="token punctuation">]</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="某些日期不可选"><a href="#某些日期不可选" class="header-anchor">#</a> 某些日期不可选</h2> <p>🔸 设置  <code>disabled-date</code>  来指定当哪些日期不可选。</p> <p>某些日期不可选: <a href="http://demo.const.team/calendar/demo5.html" target="_blank" rel="noopener noreferrer">demo5<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>calendar</span> <span class="token attr-name">multiple</span> <span class="token attr-name">:select-date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>date<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:disabled-date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disableddate<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>calendar</span><span class="token punctuation">&gt;</span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>demonstration<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>选中日期：{{date}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>demonstration<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>不可选日期：{{disableddate}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span>
        date<span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">&quot;2019-09-07&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;2019-10-10&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;2019-10-16&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;2019-10-15&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;2019-10-22&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;2019-10-18&quot;</span> <span class="token punctuation">]</span><span class="token punctuation">,</span>
        disableddate<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;2019-11-02&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;2019-11-08&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;2019-11-21&quot;</span><span class="token punctuation">]</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="设置日期区间"><a href="#设置日期区间" class="header-anchor">#</a> 设置日期区间</h2> <p>🔸 设置  <code>max-date</code>  和  <code>min-date</code>  来设置日期区间。</p> <p>设置日期区间: <a href="http://demo.const.team/calendar/demo6.html" target="_blank" rel="noopener noreferrer">demo6<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>calendar</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>calendar<span class="token punctuation">&quot;</span></span> <span class="token attr-name">multiple</span>  <span class="token attr-name">:select-date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>date<span class="token punctuation">&quot;</span></span> <span class="token attr-name">max-date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2019-12-31<span class="token punctuation">&quot;</span></span> <span class="token attr-name">min-date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2019-05-01<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:disabled-date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>disableddate<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>calendar</span><span class="token punctuation">&gt;</span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>demonstration<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>选中日期：{{date}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>demonstration<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>日期区间：2019-05-01 至 2019-12-31<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>demonstration<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>不可选日期：{{disableddate}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span>
        date<span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">&quot;2019-09-07&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;2019-10-10&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;2019-10-16&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;2019-10-15&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;2019-10-22&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;2019-10-18&quot;</span> <span class="token punctuation">]</span><span class="token punctuation">,</span>
        disableddate<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;2019-11-02&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;2019-11-08&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;2019-11-21&quot;</span><span class="token punctuation">]</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="自定义render"><a href="#自定义render" class="header-anchor">#</a> 自定义 Render</h2> <p>🔸 内置  <code>render</code>  方法，参数为 <code>year, month</code> ，配合其他组件使用。另外，通过设置名为  <code>dateCell</code>  的  <code>scoped-slot</code>  来自定义日历单元格中显示的内容。在  <code>scoped-slot</code>  可以获取到  <code>date</code> （当前单元格的日期对象），详情解释参考下方的  <code>API</code>  文档。</p> <p>自定义 Render: <a href="http://demo.const.team/calendar/demo7.html" target="_blank" rel="noopener noreferrer">demo7<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token style-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token style language-css"><span class="token property">margin-bottom</span><span class="token punctuation">:</span>20px</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-date-picker</span>
      <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>value1<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>changeDate<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>month<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">value-format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>yyyy-MM<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>选择月份<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-date-picker</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>calendar</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>calendar<span class="token punctuation">&quot;</span></span> <span class="token attr-name">multiple</span> <span class="token attr-name">:select-date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>date<span class="token punctuation">&quot;</span></span>  <span class="token attr-name">:show-title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dateCell<span class="token punctuation">&quot;</span></span> <span class="token attr-name">slot-scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{date}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-popover</span>
        <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>right<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>400<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">trigger</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>click<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dl</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dt</span><span class="token punctuation">&gt;</span></span>属性：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dt</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span>date：{{date.date}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span>year：{{date.year}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span>month：{{date.month}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span>day：{{date.day}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span>weekDay：{{date.weekDay}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span>gzDay：{{date.gzDay}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span>gzMonth：{{date.gzMonth}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span>gzYear：{{date.gzYear}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span>lunarMonth：{{date.lunarMonth}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span>lunar：{{date.lunar}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span>animal：{{date.animal}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span>astro：{{date.astro}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dl</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>reference<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>obj<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>点击<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-popover</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>calendar</span><span class="token punctuation">&gt;</span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>demonstration<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>选中日期：{{date}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span>
        value1<span class="token operator">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">,</span>
        date<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;2019-09-30&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;2019-09-28&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;2019-09-25&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;2019-10-01&quot;</span><span class="token punctuation">]</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    methods<span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token function">changeDate</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;val&quot;</span><span class="token punctuation">,</span> val<span class="token punctuation">)</span>
        <span class="token keyword">var</span> dateArr <span class="token operator">=</span> val<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&quot;-&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>calendar<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>dateArr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span> dateArr<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="attributes"><a href="#attributes" class="header-anchor">#</a> Attributes</h2> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th> <th>可选值</th> <th>默认值</th></tr></thead> <tbody><tr><td>default-date</td> <td>默认渲染日期</td> <td>Date,String</td> <td>能被 new Date () 解析的</td> <td>new Date()</td></tr> <tr><td>select-date</td> <td>绑定值</td> <td>Array</td> <td>—</td> <td>—</td></tr> <tr><td>highlighter-date</td> <td>高亮日期</td> <td>Array</td> <td>—</td> <td>—</td></tr> <tr><td>disabled-date</td> <td>不可选日期</td> <td>Array</td> <td>—</td> <td>—</td></tr> <tr><td>max-date</td> <td>最大可选日期</td> <td>Date,String</td> <td>能被 new Date () 解析的</td> <td>—</td></tr> <tr><td>min-date</td> <td>最小可选日期</td> <td>Date,String</td> <td>能被 new Date () 解析的</td> <td>—</td></tr> <tr><td>show-lunar</td> <td>是否渲染农历</td> <td>Boolean</td> <td>—</td> <td>true</td></tr> <tr><td>show-festival</td> <td>是否渲染节日</td> <td>Boolean</td> <td>—</td> <td>true</td></tr> <tr><td>show-term</td> <td>是否渲染节气</td> <td>Boolean</td> <td>—</td> <td>true</td></tr> <tr><td>show-week</td> <td>是否高亮周末</td> <td>Boolean</td> <td>—</td> <td>true</td></tr> <tr><td>show-title</td> <td>是否显示头部标题栏 (年月日 / 按钮)</td> <td>Boolean</td> <td>—</td> <td>true</td></tr> <tr><td>week-count</td> <td>每月显示的行的数量</td> <td>Number</td> <td>—</td> <td>6</td></tr> <tr><td>first-day-of-week</td> <td>周起始日</td> <td>Number</td> <td>1 到 7</td> <td>7</td></tr> <tr><td>multiple</td> <td>是否多选</td> <td>Boolean</td> <td>—</td> <td>false</td></tr></tbody></table> <h2 id="events"><a href="#events" class="header-anchor">#</a> Events</h2> <table><thead><tr><th>事件名</th> <th>说明</th> <th>参数</th></tr></thead> <tbody><tr><td>year-change</td> <td>当前渲染的年份变化时会触发该事件</td> <td>year,month</td></tr> <tr><td>month-change</td> <td>当前渲染的月份变化时会触发该事件</td> <td>year,month</td></tr> <tr><td>date-click</td> <td>点击某个日期格子时会触发该事件</td> <td>date</td></tr></tbody></table> <h2 id="date"><a href="#date" class="header-anchor">#</a> Date</h2> <table><thead><tr><th>字段</th> <th>说明</th></tr></thead> <tbody><tr><td>date</td> <td>Date 对象</td></tr> <tr><td>year</td> <td>年</td></tr> <tr><td>month</td> <td>月</td></tr> <tr><td>day</td> <td>日</td></tr> <tr><td>weekDay</td> <td>周几 (0-6)</td></tr> <tr><td>lunar</td> <td>农历日</td></tr> <tr><td>lunarMonth</td> <td>农历日</td></tr> <tr><td>festival</td> <td>节日</td></tr> <tr><td>lunarFestival</td> <td>农历节日</td></tr> <tr><td>term</td> <td>节气</td></tr> <tr><td>astro</td> <td>星座</td></tr> <tr><td>animal</td> <td>属相</td></tr> <tr><td>gzDay</td> <td>干支天</td></tr> <tr><td>gzMonth</td> <td>干支月</td></tr> <tr><td>gzYear</td> <td>干支年</td></tr> <tr><td>isToday</td> <td>是否为今天</td></tr> <tr><td>isSelect</td> <td>是否选中</td></tr> <tr><td>isWeekend</td> <td>是否为周末</td></tr> <tr><td>isOtherMonthDay</td> <td>是否属于当前渲染月份</td></tr> <tr><td>renderYear</td> <td>当前渲染年份</td></tr> <tr><td>renderMonth</td> <td>当前渲染月份</td></tr> <tr><td>isDefaultDate</td> <td>是否是默认日期</td></tr></tbody></table></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">文档更新时间:</span> <span class="time">2021-06-10 17:57:34</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/plugin/Vue-Flv-Player.html" class="prev">
        Vue-Flv-Player 播放器
      </a></span> <span class="next"><a href="/plugin/Very-Axios.html">
        Very-Axios
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----><!----></div></div>
    <script src="/assets/js/app.7f089e4c.js" defer></script><script src="/assets/js/2.9f5e73e8.js" defer></script><script src="/assets/js/3.2a47c23c.js" defer></script><script src="/assets/js/15.fc48fa10.js" defer></script>
  </body>
</html>
